<%--
  Created by IntelliJ IDEA.
  User: bestick
  Date: 2015/12/3
  Time: 16:41
  天地有万古，此身不再得；人生只百年，此日最易过。幸生其间者，不可不知有生之乐；亦不可不怀虚生之忧。
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <%-- IF IE --%>
    <jsp:include page="${pageContext.request.contextPath}/jsp/home/common/if_ie.jsp"></jsp:include>

    <!-- CharSet -->
    <meta charset="utf-8">

    <!-- Title -->
    <title>简易调查</title>

    <!-- Author -->
    <meta name="author" content="www.bestick.cn">

    <!-- Mobile Meta -->
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, maximum-scale=1,minimum-scale=1, user-scalable=no">

    <!-- Favicon -->
    <link rel="shortcut icon" href="${pageContext.request.contextPath}/resources/app/images/img/logo/favicon.ico">

    <!-- Bootstrap core CSS -->
    <link href="${pageContext.request.contextPath}/resources/libs/css/bootstrap/css/bootstrap.min.css" rel="stylesheet">

    <!-- Bootstrap Slider core CSS -->
    <link href="${pageContext.request.contextPath}/resources/libs/css/bootstrap-slider/bootstrap-slider.css"
          rel="stylesheet">

    <!-- JuCaiBang core CSS file -->
    <link href="${pageContext.request.contextPath}/resources/app/css/home/jcb.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-default navbar-sqn navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <a class="navbar-brand" href="/index">
                <img src="${pageContext.request.contextPath}/resources/app/images/img/logo/logo-mountain.png"
                     class="navbar-logo-img">
            </a>
        </div>
        <div class="navbar-collapse collapse text-center" role="navigation">
            <ul class="nav navbar-nav pull-right inline-block">
                <li>
                    <a href="/personal/info" class="personal-info-icon">
                        <span class="glyphicon glyphicon-user" aria-hidden="true"></span>&nbsp;welcome
                    </a>
                </li>
            </ul>
        </div>
    </div>
</nav>

<div class="invest-risk-container clearfix">
    <!-- question -->
    <div class="container">
        <!--投资风险问卷-->
        <div class="invest-risk-questionnaire container col-md-12">
            <div class="header-image">
                <img src="${pageContext.request.contextPath}/resources/app/images/img/logo/mountain.svg"
                     class="header-image-mountain">
            </div>
            <!--invest-risk-questionnaire-->
            <div class="question-box col-md-12">
                <div class="questionnaire-title">让我们了解您</div>
                <div class="questionnaire-sub-title">
                    <p>欢迎您来到聚财邦，为了找到您适合的资产组合，我们首先需要了解一下您的投资偏好。</p>
                </div>
                <div class="question-group">
                    <!-- question-one -->
                    <div class="question-block">
                        <span class="no-blank">我的年龄是<input type="text" class="question-group-input" name="age" id="age"
                                                           maxlength="3" size="3"/><span></span>岁,</span>
                        <span class="no-blank">我想要进行</span>

                        <div class="no-blank has-feedback inline-block dropdown">
                            <input type="text" class="question-group-input" name="term" id="term" size="5"
                                   data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"
                                   readonly="readonly"/><span></span>
                            <span class="glyphicon glyphicon-chevron-down form-control-feedback"
                                  aria-hidden="true"></span>
                            <ul class="dropdown-menu question-group-menu">
                                <li>
                                    <a href="javascript:void(0)"><span>短期</span></a>
                                </li>
                                <li>
                                    <a href="javascript:void(0)"><span>中期</span></a>
                                </li>
                                <li>
                                    <a href="javascript:void(0)"><span>长期</span></a>
                                </li>
                            </ul>
                        </div>
                        <span class="no-blank">投资。</span>
                    </div>

                    <div class="question-group-hidden">
                        <!-- question-two -->
                        <div class="question-block">
                            <span class="no-blank">我的收入是<input type="text" class="question-group-input" name="income"
                                                               id="income" maxlength="8"
                                                               size="8"/><span></span>元,</span>
                            <span class="no-blank">我节省了</span>

                            <div class="no-blank has-feedback inline-block dropdown">
                                <input type="text" class="question-group-input" name="save" id="save" size="5"
                                       data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"
                                       readonly="readonly"/><span></span>
                                <span class="glyphicon glyphicon-chevron-down form-control-feedback"
                                      aria-hidden="true"></span>
                                <ul class="dropdown-menu question-group-menu">
                                    <li>
                                        <a href="javascript:void(0)"><span>10-20%</span></a>
                                    </li>
                                    <li>
                                        <a href="javascript:void(0)"><span>20-30%</span></a>
                                    </li>
                                    <li>
                                        <a href="javascript:void(0)"><span>30-40%</span></a>
                                    </li>
                                </ul>
                            </div>
                            <span class="no-blank">。</span>
                        </div>

                        <!-- question-three -->
                        <div class="question-block">
                            <span class="no-blank">我的流动资产是<input type="text" class="question-group-input"
                                                                 name="flowAsset" id="flowAsset" maxlength="8"
                                                                 size="8"/><span></span>元,</span>
                            <span class="no-blank">我的风险承受能力是</span>

                            <div class="no-blank has-feedback inline-block dropdown">
                                <input type="text" class="question-group-input" name="level" id="level" size="5"
                                       data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"
                                       readonly="readonly"/><span></span>
                                <span class="glyphicon glyphicon-chevron-down form-control-feedback"
                                      aria-hidden="true"></span>
                                <ul class="dropdown-menu question-group-menu">
                                    <li>
                                        <a href="javascript:void(0)"><span>低</span></a>
                                    </li>
                                    <li>
                                        <a href="javascript:void(0)"><span>中</span></a>
                                    </li>
                                    <li>
                                        <a href="javascript:void(0)"><span>高</span></a>
                                    </li>
                                </ul>
                            </div>
                            <span class="no-blank">。</span>
                        </div>

                        <button class="btn btn-invest-risk-submit">
                            <div class="btn-loading-text">建立我的投资计划</div>
                            <div class="loading hidden"></div>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- gap -->
    <div class="gap"></div>

    <!-- invest-risk-qn-result -->
    <div class="qn-result container" id="qn-result"></div>
</div>

<!-- footer -->
<jsp:include page="${pageContext.request.contextPath}/jsp/home/common/footer.jsp"></jsp:include>

<!-- JavaScript files placed at the end of the document so the pages load faster
		==================================================================================== -->
<!-- Jquery and Bootstap core js files -->
<script type="text/javascript" src="${pageContext.request.contextPath}/resources/libs/js/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/resources/libs/js/bootstrap.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/resources/libs/js/Highcharts.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/resources/libs/js/jsrender.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/resources/app/js/home/bootstrap-slider.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/resources/app/js/home/common.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/resources/app/js/home/questionnaire.js"></script>

<!-- 调查问卷结果模版 -->
<script id="qn-result-temp" type="text/x-jsrender">
    {{!-- qn-result --}}
    <div class="invest-risk-questionnaire col-md-12">
        <div class="header-image">
            <img src="${pageContext.request.contextPath}/resources/app/images/img/logo/investment.svg"
                 class="header-image-mountain">
        </div>
        <!--invest-risk-questionnaire-->
        <div class="question-box col-md-12">
            <div class="questionnaire-title">您的投资计划</div>
            <div class="questionnaire-sub-title">
                <p>我们为您推荐一个非常积极的增长组合。</p>
            </div>
            <div class="chart-box">

                <!-- 图表控制器 -->
                <div class="chart-control col-md-6 col-md-offset-3">
                    <div class="chart-reset">复位</div>
                    <div class="qn-slider">
                        <input type="text" id="jcb-qn-slider" class="jcb-qn-slider" data-slider-min="0"
                               data-slider-max="100" data-slider-step="1" data-slider-value="0"
                               data-slider-tooltip="hide"/>
                    </div>
                </div>

                <!-- 图表内容区 -->
                <div class="chart-area col-md-8 col-md-offset-2 col-lg-6 col-lg-offset-0">
                    <h5 class="chart-area-title">标准配置</h5>

                    <div class="chart-inner-panel">
                        <div id="qn-chart"></div>
                    </div>
                </div>

                <!-- 图表内容区 -->
                <div class="chart-area col-md-8 col-md-offset-2 col-lg-6 col-lg-offset-0">
                    <h5 class="chart-area-title">计划特点</h5>

                    <div class="chart-inner-panel" style="padding: 31px 86px;">
                        <div class="character text-left">
                            <div class="row">
                                <div class="col-sm-6">
                                    <ul class="check-list">
                                        <li>
                                            <div class="check-mark"></div>
                                            <div class="check-text" data-toggle="popover" data-trigger="click hover"
                                                 data-placement="top"
                                                 data-content="提高你的任何风险水平的回报。我们分散投资于资产类别：股票、债券、新兴市场、发达国家和房地产。">高回报
                                            </div>
                                        </li>
                                        <li>
                                            <div class="check-mark"></div>
                                            <div class="check-text" data-toggle="popover" data-trigger="click hover"
                                                 data-placement="top"
                                                 data-content="提高你的任何风险水平的回报。我们分散投资于资产类别：股票、债券、新兴市场、发达国家和房地产。">低风险
                                            </div>
                                        </li>
                                        <li>
                                            <div class="check-mark"></div>
                                            <div class="check-text" data-toggle="popover" data-trigger="click hover"
                                                 data-placement="top"
                                                 data-content="提高你的任何风险水平的回报。我们分散投资于资产类别：股票、债券、新兴市场、发达国家和房地产。">自动平衡
                                            </div>
                                        </li>
                                        <li>
                                            <div class="check-mark"></div>
                                            <div class="check-text" data-toggle="popover" data-trigger="click hover"
                                                 data-placement="top"
                                                 data-content="提高你的任何风险水平的回报。我们分散投资于资产类别：股票、债券、新兴市场、发达国家和房地产。">节税
                                            </div>
                                        </li>
                                        <li>
                                            <div class="check-mark"></div>
                                            <div class="check-text" data-toggle="popover" data-trigger="click hover"
                                                 data-placement="top"
                                                 data-content="提高你的任何风险水平的回报。我们分散投资于资产类别：股票、债券、新兴市场、发达国家和房地产。">个性化配置
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                                <div class="col-sm-6">
                                    <ul class="check-list">
                                        <li>
                                            <div class="check-mark"></div>
                                            <div class="check-text" data-toggle="popover" data-trigger="click hover"
                                                 data-placement="top"
                                                 data-content="提高你的任何风险水平的回报。我们分散投资于资产类别：股票、债券、新兴市场、发达国家和房地产。">地域多元化
                                            </div>
                                        </li>
                                        <li>
                                            <div class="check-mark"></div>
                                            <div class="check-text" data-toggle="popover" data-trigger="click hover"
                                                 data-placement="top"
                                                 data-content="提高你的任何风险水平的回报。我们分散投资于资产类别：股票、债券、新兴市场、发达国家和房地产。">现金最小化
                                            </div>
                                        </li>
                                        <li>
                                            <div class="check-mark"></div>
                                            <div class="check-text" data-toggle="popover" data-trigger="click hover"
                                                 data-placement="top"
                                                 data-content="提高你的任何风险水平的回报。我们分散投资于资产类别：股票、债券、新兴市场、发达国家和房地产。">无忧
                                            </div>
                                        </li>
                                        <li>
                                            <div class="check-mark"></div>
                                            <div class="check-text" data-toggle="popover" data-trigger="click hover"
                                                 data-placement="top"
                                                 data-content="提高你的任何风险水平的回报。我们分散投资于资产类别：股票、债券、新兴市场、发达国家和房地产。">低收费
                                            </div>
                                        </li>
                                        <li>
                                            <div class="check-mark"></div>
                                            <div class="check-text" data-toggle="popover" data-trigger="click hover"
                                                 data-placement="top"
                                                 data-content="提高你的任何风险水平的回报。我们分散投资于资产类别：股票、债券、新兴市场、发达国家和房地产。">个人顾问
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 进入产品列表 -->
            <div class="question-box-redirect col-md-6 col-md-offset-3">
                <input type="button" class="btn btn-jcb-red" value="进入产品列表" onclick="location.assign('/list/productList')" style="width: 248px;">
                <div class="desc">注：我们会收取0.25%/年的费用。</div>
            </div>
        </div>
    </div>
</script>
<script>
    $('#age').val('${age}');
    $('#term').val('${term}');
    $('#income').val('${income}');
    $('#save').val('${save}');
    $('#flowAsset').val('${flowAsset}');
    $('#level').val('${level}');
    $(document).ready(function() {
        if ('${param.size()}' > 0) {
            $('.question-group-hidden').css('display','block');
            $('.btn-invest-risk-submit').click();
        }
    });
</script>
</body>
</html>
